<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!-- 删除默认的苹果工具栏和菜单栏 ： 即启用 WebApp 全屏模式  -->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<!-- 忽略数字自动识别为电话号码 ,忽略识别邮箱 -->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!-- 启用360浏览器的极速模式(webkit) -->
		<meta name="renderer" content="webkit">
		<!-- 避免IE使用兼容模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- uc强制竖屏 -->
		<meta name="screen-orientation" content="portrait" />
		<!-- QQ强制竖屏 -->
		<meta name="x5-orientation" content="portrait">
		<!-- UC强制全屏 -->
		<meta name="full-screen" content="true" />
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true" />
		<!-- 360强制全屏 -->
		<meta name="360-fullscreen" content="true" />
		<title>登录</title>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
		<style>
			body {
				padding: 0px;
				margin: 0px;
			}
			
			.top {
				width: 100%;
				height: 1.3rem;
				display: flex;
				justify-content: center;
				align-items: center;
				border-bottom: 0.05rem solid #ebebeb;
			}
			
			.tubiao {
				position: absolute;
				left: 0.5rem;
				color: #696969;
			}
			
			.biaoti p {
				font-size: 0.5rem;
				color: #181818;
			}
			
			.log {
				margin-top:0.3rem;
				/*width: 100%;*/
				/*height: 5rem;*/
				display: flex;
				justify-content: center;
				align-items: center;
				/*background:red;*/
			}
			.log img{
				height:5rem;
				width:3.2rem;
			}
			.biaodan {
				text-align: center;
				margin-top: 1rem;
			}
			
			.biaodan form {
				position: relative;
			}
			
			.biaodan input {
				text-align: left;
				width: 8rem;
				border: 0.02rem solid #ccc;
				border-radius: 0.1rem;
				height: 1.2rem;
				font-size: 0.45rem;
				padding-left: 0.2rem;
				margin-bottom: 0.8rem;
				box-sizing: border-box;
			}
			input[type=text]{
				background:url(imges/user-logo.png) no-repeat 0.1rem center;
				background-size:0.7rem;
				padding-left:1rem;
			}
			input[type=password]{
				background:url(imges/pwd-logo.png) no-repeat 0.1rem center;
				background-size:0.7rem;
				padding-left:1rem;
			}
			input[type=button] {
				margin-bottom: 0.4rem;
			}
			
			.biaodan .denglu {
				text-align: center;
				background: linear-gradient(to bottom, #3fa9f5, #45a4d8);
				border: none;
				color: white;
			}
			
			.kejian {
				display:block;
				width: 0.6rem;
				height: 0.6rem;
				background: url(imges/eye-logo.png)no-repeat center center;
				background-size: contain;
				position: absolute;
				left: 8.2rem;
				top: 2.45rem;
			}
			
			.eyekejian {
				display: none;
				width: 0.6rem;
				height: 0.6rem;
				background: url(imges/eye-hover-logo.png)no-repeat center center;
				background-size: contain;
				position: absolute;
				left: 8.2rem;
				top: 2.45rem;
			}
			
			.mingzi {
				display: none;
				position: absolute;
				top: 1.4rem;
				left: 1rem;
				color: #dc3632;
				background: url(imges/ts.png)no-repeat left center;
				background-size: 0.5rem;
				padding-left: 0.6rem;
			}
			
			.pass {
				display: none;
				position: absolute;
				top: 3.4rem;
				left: 1rem;
				color: #dc3632;
				background: url(imges/ts.png)no-repeat left center;
				background-size: 0.5rem;
				padding-left: 0.6rem;
			}
			
			.fot {
				display: flex;
				padding: 0px 1rem;
				justify-content: space-between;
			}
			
			.fot div {
				font-size: 0.4rem;
				color: #97a5c3;
			}
		</style>
	</head>

	<body>
		<div class="top">
			<span class="fa fa-angle-left tubiao" style="font-size:50px;color:#ccc;" onclick="javascript:history.go(-1)"></span>
			<div class="biaoti">
				<p>登录</p>
			</div>
		</div>
		<div class="log">
			<img src="imges/博学app闪屏.png" />
		</div>
		<div class="biaodan">
			<form action="" method="">
				<input type="text" placeholder="请输入手机号/邮箱" id="phone" />
				<input type="password" placeholder="请输入密码" id="pass" />
				<div class="kejian" id="eye"></div>
				<input type="button" value="登 录" class="denglu" />
				<div class="mingzi"></div>
				<div class="pass"></div>
			</form>
		</div>
		<div class="fot">
			<div class="zhuce">立即注册</div>
			<div>忘记密码</div>
		</div>
		<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
		<script>
			$(start);
			//正确的账号和密码
			var tel = "12345678912";
			var youxiang = "123456789@qq.com";
			var mima = "123456";

			function start() {
				
				
				$("#phone").focus(
					function() {
						$(this).css({
							"border": "0.02rem solid #3366FF"
						}).siblings().css("border", "");
						$(this).removeAttr("placeholder");
						$(".mingzi").hide().text("");
						if($("#pass").val()==""){
							$("#pass").attr("placeholder","请输入密码");
						}	
					}
					
				)
				$("#phone").keyup(
					function() {
						var number = $("#phone").val().trim();
						if(number != tel && number.length > 0 || number != youxiang && number.length > 0) {
							$(".mingzi").show().text("您输入的手机号码或邮箱有误");
						}
						if(number == tel && number.length > 0 || number == youxiang && number.length > 0) {
							$(".mingzi").show().text("");
						}

					}
				)
				$("#pass").focus(
					function() {
						$(this).css({
							"border": "0.02rem solid #3366FF"
						}).siblings().css("border", "");
						$(this).removeAttr("placeholder");
						$(".pass").hide().text("");
						if($("#phone").val()==""){
							$("#phone").attr("placeholder","请输入手机号/邮箱");
						}	
					}
				)
				$("#pass").keyup(
					function() {
						var rightmima = $("#pass").val();
						if(rightmima != mima||rightmima.length<=0) {
							$(".pass").show().text("您输入的密码有误");
						} else {
							$(".pass").hide().text("");
						}

					}
				)
				$("#eye").click(
					function() {
						var eye=$("#eye");
						var showmima=$("#pass").val();
						if(showmima.length>0&&eye.hasClass("kejian")){
							eye.removeClass("kejian").addClass("eyekejian").show();
							$("#pass").attr("type","text");
						}else if(showmima.length>0&&eye.hasClass("eyekejian")){
							eye.removeClass("eyekejian").addClass("kejian").show();
							$("#pass").attr("type","password");
						}
					}
				)
				$(".denglu").click(
					function(){
						var rightphone=$("#phone").val();
						var rightmima=$("#pass").val();
						if(rightphone==tel||rightphone==youxiang&&rightmima==mima){
							location.href="首页.html";
						}
					}
				)
				$(".zhuce").click(
					function(){
						location.href="立即注册.html";
					}
				)
			}
		</script>
	</body>

</html>